<template>
	<view class="page-container">

		<!-- 增强的动态背景装饰 -->
		<view class="dynamic-background">
			<view class="bg-shape shape-1"></view>
			<view class="bg-shape shape-2"></view>
			<view class="bg-shape shape-3"></view>
			<view class="bg-shape shape-4"></view>
			<!-- 添加额外的动态元素 -->
			<view class="bg-dot dot-1"></view>
			<view class="bg-dot dot-2"></view>
			<view class="bg-dot dot-3"></view>
		</view>

		<!-- 增强的动态背景装饰 -->
		<view class="mainContentStyle">
			<view class="header" :style="{height: mainNavHeightValue + 'px'}">
				<view class="nav-content">
					<!-- 导航内层容器：保留动态边距和高度绑定 -->
					<view class="nav-inner-wrap"
						:style="{'margin-bottom': -stateHeightValue + 10 + 'px', 'height': navHeightValue + 'px'}">
						<text class="nav-title">{{$t('index.tab.mineTitle')}}</text>
					</view>
				</view>
			</view>
			<!-- 头部用户信息 -->
			<view class="user-info-container">
				<view class="user-avatar">
					<image class="avatar-img" src="../../../static/readDetail/userNorIcon.jpeg"></image>
				</view>

				<view class="user-info">
					<view class="user-name">{{ $t('index.tab.mineTitle') }}</view>
					<view class="user-id">{{ userIdInfo }}</view>
				</view>

				<view class="user-actions">
					<view class="action-item"></view>
					<view class="action-item"></view>
				</view>
			</view>
		</view>




		<!-- 主内容区 -->
		<view class="content-wrapper">


			<!-- 用户操作列表 -->
			<view class="setting-item" @click="checkeVersionUpdates">
				<view class="item-content">
					<view class="item-icon">
						<u-icon name="star"></u-icon>
					</view>
					<view class="item-title">
						<label class="set-config-label">{{ $t('setting.systemVersion') }}</label>
					</view>
					<view class="item-value">
						<label>{{ appSysVersion }}</label>
					</view>
				</view>
				<view class="item-arrow">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<view class="setting-item" @click="clearTheCacheClick">
				<view class="item-content">
					<view class="item-icon">
						<u-icon name="coupon"></u-icon>
					</view>
					<view class="item-title">
						<label class="set-config-label">{{ $t('setting.systemCache') }}</label>
					</view>
					<view class="item-value">
						<label>{{ allCacheData }}</label>
					</view>
				</view>
				<view class="item-arrow">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<view class="setting-item" @click="changTheUserGenderClick">
				<view class="item-content">
					<view class="item-icon">
						<u-icon name="account"></u-icon>
					</view>
					<view class="item-title">
						<label class="set-config-label">{{ $t('setting.genderSelection') }}</label>
					</view>
					<view class="item-value">
						<label>{{ sexItem.name || $t('mine.gender.default') }}</label>
					</view>
				</view>
				<view class="item-arrow">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<view class="setting-item" @click="onLanguageChange()">
				<view class="item-content">
					<view class="item-icon">
						<u-icon name="setting"></u-icon>
					</view>
					<view class="item-title">
						<label class="set-config-label">{{ $t('setting.sysSet') }}</label>
					</view>
					<view class="item-value">
						<label>{{ languageItem.name || $t('mine.gender.default') }}</label>
					</view>
				</view>
				<view class="item-arrow">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

			<view class="setting-item last-item" @click="feedbackClick">
				<view class="item-content">
					<view class="item-icon">
						<u-icon name="edit-pen"></u-icon>
					</view>
					<view class="item-title">
						<label class="set-config-label">{{ $t('setting.feedback') }}</label>
					</view>
				</view>
				<view class="item-arrow">
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>

		</view>

		<!-- 清除缓存弹窗 -->
		<u-modal :show="clearState" :show-cancel-button="true" confirm-color="#F0AD4E"
			:content="$t('setting.needClearCache')" :confirm-text="$t('common.confirm')"
			:cancel-text="$t('common.cancel')" @confirm="clearCacheMethodClick" @cancel="cancelChcheMethods">
		</u-modal>

		<!-- 性别选择弹窗 -->
		<u-action-sheet :actions="sexList" :closeOnClickOverlay="true" :closeOnClickAction="true"
			:title="$t('mine.gender.selectTitle')" safeAreaInsetBottom :show="sexSeleState" @select="selectClick"
			@close="closeSexSeleClick"></u-action-sheet>


		<!-- 语言选择弹窗 -->
		<u-action-sheet :actions="languageItems" :closeOnClickOverlay="true" :closeOnClickAction="true" title="选择语言"
			safeAreaInsetBottom :show="languageShow" @select="selectLanguageClick"
			@close="closeLanguageChange"></u-action-sheet>

		<ver-check-tools ref="versionCheckInfo"></ver-check-tools>
	</view>
</template>

<script>
	import neilModal from '../../../components/neil-modal/neil-modal.vue'
	export default {
		data() {
			return {
				appSysVersion: "",
				allCacheData: "",
				clearState: false,
				sysInfoRes: null,
				navHeightValue: 50,
				stateHeightValue: 0,
				mainNavHeightValue: 0,
				mainTabBarHeight: 50,
				sexSeleState: false,
				sexItem: {
					name: '',
					code: "",
					id: 0,
				},
				userIdInfo: "",
				sysType: '',
				languageShow: false,
				languageItems: [{
						name: this.$t('locale.en'),
						code: 'en'
					},
					{
						name: this.$t('locale.zh-hans'),
						code: 'zh-Hans'
					},
					{
						name: this.$t('locale.zh-hant'),
						code: 'zh-Hant'
					},
					{
						name: this.$t('locale.ja'),
						code: 'ja'
					}
				],
				languageItem: {},
				isAndroid: "",
			};
		},
		components: {
			neilModal
		},
		onLoad() {},
		computed: {
			sexList() {
				return [{
						name: this.$t('mine.gender.male'),
						code: "boy",
						id: 1,
					},
					{
						name: this.$t('mine.gender.female'),
						code: "girl",
						id: 2,
					}
				];
			}
		},
		created() {
			this.sysInfoRes = uni.getSystemInfoSync();
			this.stateHeightValue = this.sysInfoRes.statusBarHeight;
			this.mainNavHeightValue = this.navHeightValue + this.stateHeightValue;

			// 获取系统版本号
			this.sysType = this.$deviceInfoTools.getDeviceTypeAndAndroidOrIos();
			if (this.sysType == 'android' || this.sysType == 'ios') {
				this.initSysVersionNum();
				// 获取缓存大小
				this.formatSize();
			} else {
				this.appSysVersion = this.$t('mine.version.unknown');
				this.allCacheData = "0 KB"
			}

			// 读取缓存的性别信息
			var sexItemStr = uni.getStorageSync("USERNORMALSEXSQLKEY");
			if (sexItemStr.length > 0) {
				this.sexItem = JSON.parse(sexItemStr);
			}

			this.languageItems.forEach((item, indx) => {
				if (item.code == this.$i18n.locale) {
					this.languageItem = item
				}
			})
		},
		mounted() {
			// 读取用户ID，无则生成
			let uidStr = uni.getStorageSync("userIdInfo");
			if (uidStr == null || uidStr == "") {
				let uid = this.getUUID();
				this.userIdInfo = uid;
				uni.setStorageSync("userIdInfo", this.userIdInfo);
			} else {
				this.userIdInfo = uidStr;
			}
		},
		methods: {
			// 跳转登录页
			loginOutWidthClick() {
				uni.navigateTo({
					url: '/pages/login/index'
				});
			},

			// 触发清理缓存
			clearTheCacheClick() {
				if (this.sysType == 'android' || this.sysType == 'ios') {
					this.clearState = true;
				} else {
					// 浏览器模式提示
					uni.showToast({
						title: this.$t('mine.browserNoClearCache')
					})
				}
			},

			// 确认清理缓存
			clearCacheMethodClick() {
				this.clearState = false;
				this.clearCache();
			},

			// 取消清理缓存
			cancelChcheMethods() {
				this.clearState = false;
			},

			// 意见反馈（空实现）
			feedbackClick() {},

			// 获取系统版本号
			initSysVersionNum() {
				plus.runtime.getProperty(plus.runtime.appid, (wgtinfo) => {
					this.appSysVersion = wgtinfo.version
				})
			},

			// 计算缓存大小
			formatSize() {
				let that = this;
				plus.cache.calculate(function(size) {
					let sizeCache = parseInt(size);
					if (sizeCache == 0) {
						that.allCacheData = "0B";
					} else if (sizeCache < 1024) {
						that.allCacheData = sizeCache + "B";
					} else if (sizeCache < 1048576) {
						that.allCacheData = (sizeCache / 1024).toFixed(2) + "KB";
					} else if (sizeCache < 1073741824) {
						that.allCacheData = (sizeCache / 1048576).toFixed(2) + "MB";
					} else {
						that.allCacheData = (sizeCache / 1073741824).toFixed(2) + "GB";
					}
				});
			},

			// 检查版本更新
			checkeVersionUpdates() {
				this.$refs.versionCheckInfo.initViewData({
					checkState: ""
				});
			},

			// 清理缓存实现
			clearCache() {
				let that = this;
				let os = plus.os.name;
				if (os == 'Android') {
					let main = plus.android.runtimeMainActivity();
					let sdRoot = main.getCacheDir();
					let files = plus.android.invoke(sdRoot, "listFiles");
					let len = files.length;
					for (let i = 0; i < len; i++) {
						let filePath = '' + files[i];
						plus.io.resolveLocalFileSystemURL(filePath, function(entry) {
							if (entry.isDirectory) {
								entry.removeRecursively(function() {
									// 清理成功提示
									uni.showToast({
										title: that.$t('mine.cacheClearSuccess'),
										duration: 2000
									});
									that.formatSize(); // 重新计算缓存  
								}, function(e) {
									console.log(e.message)
								});
							} else {
								entry.remove();
							}
						}, function() {
							console.log(that.$t('mine.cacheReadFail'))
						});
					}
				} else { // iOS  
					plus.cache.clear(function() {
						uni.showToast({
							title: that.$t('mine.cacheClearSuccess'),
							duration: 2000
						});
						that.formatSize();
						that.clearState = false;
					});
				}
			},

			// 打开性别选择
			changTheUserGenderClick() {
				this.sexSeleState = true
			},

			// 选择性别
			selectClick(item) {
				this.sexItem = item;
				uni.setStorageSync("USERNORMALSEXSQLKEY", JSON.stringify(this.sexItem));
				this.sexSeleState = false
			},

			// 关闭性别选择
			closeSexSeleClick() {
				this.sexSeleState = false
			},

			onLanguageChange() {
				this.languageShow = true
			},
			closeLanguageChange() {
				this.languageShow = false
			},
			selectLanguageClick(data) {
				let that = this
				that.languageItem = data;
				let systemInfo = uni.getSystemInfoSync();
				that.isAndroid = systemInfo.platform.toLowerCase() === 'android';
				if (that.isAndroid) {
					uni.showModal({
						content: that.$t('index.language-change-confirm'),
						success: (res) => {
							if (res.confirm) {
								uni.setLocale(data.code);
								that.$i18n.locale = data.code;
							}
						}
					})
				} else {
					uni.setLocale(data.code);
					that.$i18n.locale = data.code;
				}
				that.languageShow = false;
			},

			// 生成UUID
			getUUID() {
				return 'xxxxxxxx4xxxy'.replace(/[xy]/g, c => {
					return (c === 'x' ? (Math.random() * 16 | 0) : ('r&0x3' | '0x8')).toString(16)
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	$primary-color: #d4237a;
	$secondary-color: #5AC8FA;
	// 颜色变量
	$primary-color: #007CDC;
	$bg-color: #ededed;
	$white-color: #ffffff;
	$text-primary: #303133;
	$text-secondary: #909399;
	$border-color: #e4e7ed;
	$warning-color: #F0AD4E;
	$arrow-color: #BDBDBD;

	// 尺寸变量
	$user-info-height: 90px;
	$setting-item-height: 55px;
	$avatar-size: 72px;
	$spacing: 10px;

	$bg-secondary: #f8f9fa;

	// 页面容器
	.page-container {
		position: absolute;
		// background-color: $primary-color;
		width: 100vw;
		height: 100vh;
	}

	// 状态栏占位
	.status-bar {
		width: 100%;
	}

	// 导航栏
	.main-nav {}

	// 主内容区
	.content-wrapper {
		height: calc(100% - var(--window-bottom) - var(--status-bar-height) - 44px);
		width: 100%;
		margin-top: calc(var(--status-bar-height) + $user-info-height + 80px);
	}

	// 用户信息容器
	.user-info-container {
		height: $user-info-height;
		width: 100%;
		display: flex;
		flex-direction: row;
		margin-bottom: 15px;

	}

	// 用户头像
	.user-avatar {
		margin-left: $spacing;
		width: 76px;
		height: 76px;

		.avatar-img {
			height: $avatar-size;
			width: $avatar-size;
			border-radius: 40px;
		}
	}

	// 用户信息
	.user-info {
		width: calc(100% - 86px - 55px - 5px);
		height: 76px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		margin-left: 5px;

		.user-name {
			height: 35px;
			line-height: 35px;
			font-size: 18px;
			color: white;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.user-id {
			height: 20px;
			line-height: 20px;
			font-size: 14px;
			color: rgba(255, 255, 255, 0.6);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.set-config-label {
		display: inline-block;
		width: 150px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	// 用户操作区
	.user-actions {
		width: 55px;
		height: 76px;
		display: flex;
		flex-direction: row;

		.action-item {
			height: 100%;
			width: 50%;
			display: flex;
			align-items: center;
			justify-content: center;
			// background-color: $white-color;
		}

		.action-item:last-child {
			justify-content: flex-start;
		}
	}

	// 设置项通用样式
	.setting-item {
		position: relative;
		margin-top: 15px;
		width: 100%;
		height: $setting-item-height;
		background-color: rgba(255, 255, 255, 0.2);
		// background-color: red;
		display: flex;
		align-items: center;
		justify-content: center;
		border-bottom: 1px solid $border-color;

		&.last-item {
			border-bottom: 0;
		}

		&:not(:first-child) {
			margin-top: 0;
		}

		.item-content {
			height: 30px;
			width: calc(100% - 20px);
			display: flex;
			flex-direction: row;
			align-items: center;
		}

		.item-icon {
			height: 100%;
			width: 20px;
			text-align: center;
			line-height: 50px;
			color: #FD8545;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			margin-right: 10px;
		}

		.item-title {
			height: 100%;
			line-height: 30px;
			font-size: 16px;
			text-align: left;
			color: $text-primary;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.item-value {
			position: absolute;
			right: 40px;
			height: 20px;
			line-height: 20px;
			font-size: 14px;
			text-align: right;
			color: $text-secondary;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.item-arrow {
			position: absolute;
			margin-top: 5px;
			right: 15px;
			height: 20px;
			width: 20px;
			line-height: 20px;
			font-size: 10px;
			text-align: center;
			color: $arrow-color;
		}
	}



	// 4. 顶部导航栏样式（原有用样式保留，无冗余）
	.header {
		width: 100%;
		z-index: 1000;
		// background: linear-gradient(135deg, $primary-color, $secondary-color);
		overflow: hidden;
		display: flex;
		align-items: center;
		// 移除状态栏占位，直接使用固定高度
		padding-top: 0;
	}

	.nav-content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		max-width: 100%;
	}

	.nav-inner-wrap {
		width: 100vw;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-title {
		color: white;
		font-size: 16px;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.mainContentStyle {
		position: fixed;
		height: auto;
		width: auto;
		display: flex;
		flex-direction: column;
		background: linear-gradient(135deg, #d4237a, #5AC8FA);
		z-index: 1;
	}

	// 增强的动态背景装饰 - 确保动态效果
	.dynamic-background {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 0;
		overflow: hidden;
		// 增强背景效果
		background-color: $bg-secondary;
		// 添加背景渐变效果
		background-image:
			radial-gradient(circle at 50% 20%, rgba(0, 122, 255, 0.08), transparent 70%),
			radial-gradient(circle at 80% 60%, rgba(90, 200, 250, 0.05), transparent 60%);
		// 添加背景动画
		animation: subtleBgMove 30s ease-in-out infinite;
	}

	@keyframes subtleBgMove {

		0%,
		100% {
			background-position: 0% 0%, 100% 100%;
		}

		50% {
			background-position: 20% 10%, 80% 90%;
		}
	}

	.bg-shape {
		position: absolute;
		background: linear-gradient(135deg, rgba(0, 122, 255, 0.1), transparent);
		border-radius: 50%;
		animation: float-shape 15s ease-in-out infinite;
		// 增强形状效果
		backdrop-filter: blur(30px);
	}

	// 额外的动态点元素
	.bg-dot {
		position: absolute;
		background: rgba(0, 122, 255, 0.2);
		border-radius: 50%;
		animation: dot-float 8s ease-in-out infinite;
	}

	.dot-1 {
		top: 25%;
		left: 15%;
		width: 10px;
		height: 10px;
		animation-delay: 1s;
	}

	.dot-2 {
		top: 60%;
		right: 25%;
		width: 8px;
		height: 8px;
		animation-delay: 3s;
	}

	.dot-3 {
		bottom: 15%;
		left: 40%;
		width: 6px;
		height: 6px;
		animation-delay: 5s;
	}

	@keyframes dot-float {

		0%,
		100% {
			transform: translateY(0) scale(1);
			opacity: 0.3;
		}

		50% {
			transform: translateY(-20px) scale(1.5);
			opacity: 0.8;
		}
	}

	.shape-1 {
		top: 10%;
		left: -10%;
		width: 40vw;
		height: 40vw;
		animation-delay: 0s;
	}

	.shape-2 {
		top: 50%;
		right: -15%;
		width: 50vw;
		height: 50vw;
		animation-delay: 2s;
		animation-duration: 20s;
	}

	.shape-3 {
		bottom: 10%;
		left: 30%;
		width: 30vw;
		height: 30vw;
		animation-delay: 4s;
		animation-duration: 18s;
	}

	.shape-4 {
		top: 30%;
		right: 20%;
		width: 20vw;
		height: 20vw;
		animation-delay: 6s;
		animation-duration: 16s;
	}

	@keyframes float-shape {

		0%,
		100% {
			transform: translate(0, 0) rotate(0deg);
		}

		25% {
			transform: translate(10px, -10px) rotate(5deg);
		}

		50% {
			transform: translate(0, -20px) rotate(0deg);
		}

		75% {
			transform: translate(-10px, -10px) rotate(-5deg);
		}
	}
</style>